<script setup>
import {nextTick, onMounted, ref} from 'vue'
import { useRoute } from 'vue-router'

import {  getuser , getcompanionlist, delcompanion} from "@/api/index.js"

const route = useRoute() // 获取当前路由信息
const routeName = route.meta.name
const routeall = route.meta.describe


import { getavatar} from '@/api/index.js'


// 切换添加权限、编辑权限名称
const title = ref('新增陪护师')



const fileList = ref()
onMounted(async () => {


  // 获取陪护师头像列表
  const res = await getavatar()
  fileList.value = res.data.data


  // 获取陪护师哦列表
  getpeifushilist()
})








const formRef = ref()
const dialongformvisible = ref(false)



// form数据
const form = ref({
  id: "", // id
  mobile: '', // 手机号
  active: 1, // 是否生效
  age: 18, // 年龄
  avatar:'', // 头像
  name:'', // 姓名
  sex:''  // 性别
})


// 表单校验
const rules = {
  name: [
    { required: true, message: '请填写名称', trigger: 'blur' },
  ],
    avatar: [
    { required: true, message: '请选择头像', },
  ],
    sex: [

    { required: true, message: '请选择性别', trigger: 'change' },
  ],
    mobile: [
    { required: true, message: '请填写手机号', trigger: 'blur' },
  ],
}

// 表单提交
const confirm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid,fields) => {
    if (valid) {
      const res = await getuser(form.value.id,form.value.mobile,form.value.active,form.value.age,form.value.avatar,form.value.name,form.value.sex)
      if (res.data.code === 10000){
        alert("创建成功")
         beforeClose()
         getpeifushilist()
      }else{
        console.log("添加陪护师失败！");

      }

    }else {
      console.log('error submit!',fields)
    }
  })
}

// 关闭弹窗的回调
const beforeClose = () => {
  dialongformvisible.value = false
  // 重置表单数据
  formRef.value.resetFields()

}

// 分页数据定义
const missions = ref({
  pageNum:1,
  pageSize:10
})

// 定义表格数据
const tableData1 = ref({
  list: [],
  total: 0
})


// api 获取陪护师列表
const getpeifushilist = async () => {
  const res = await getcompanionlist(missions.value.pageNum,missions.value.pageSize)
  tableData1.value.list = res.data.data.list

}



// 分页
const handleSizeChange = (val) => {
  missions.value.pageSize = val
  getpeifushilist()
}
const handleCurrentChange = (val) => {
  missions.value.pageNum = val
  getpeifushilist()
}









// 编辑 菜单权限
const deleteRow = (row = {}) => {
  dialongformvisible.value = true
  title.value = '编辑陪护师信息'
  nextTick(()=>{
    if (row) {
      form.value = {
        name:row.name,
        sex:row.sex,
        age:row.age,
        mobile:row.mobile,
        active:row.active
      }
    }
  })
}




const caidan = () => {
  dialongformvisible.value = true
  title.value = '新增陪护师信息'
}



// 头像选择弹窗
const dialongformimg = ref(false)
const selectIndex = ref(0)

const confirmimg = () => {
  form.value.avatar =  fileList.value[selectIndex.value].url
  dialongformimg.value = false
}

// 存储选中的行数据
const multipleSelection = ref([])
// 全选或者反选
const handleSelectionChange = (val) => {
  multipleSelection.value = val

}

const shanchu = async () => {
  if (multipleSelection.value.length === 0){
    alert('请先选择一条数据')
    return
  }
    const res = await delcompanion({id:multipleSelection.value})
    if (res.data.code === 10000){
      alert("删除成功")
      getpeifushilist()
    }


}


</script>

<template>
  <panelHead :routeName = "routeName" :routeall = "routeall" ></panelHead>
  <div class="btn"><el-button type="primary" @click="caidan">添加权限</el-button>
  <el-button type="danger" @click="shanchu()">删除</el-button>
  </div>
  <el-table @selection-change="handleSelectionChange" :data="tableData1.list" style="width: 100%" max-height="350">
      <el-table-column type="selection" width="55" />
    <el-table-column fixed prop="id" label="id" width="150" />
    <el-table-column fixed prop="name" label="呢称" width="200" ></el-table-column>
    <el-table-column fixed prop="avatar" label="头像" width="250" >
      <template #default="scope">
        <el-image style="width: 50px; height: 50px" :src="scope.row.avatar"></el-image>
      </template>
    </el-table-column>

     <el-table-column fixed prop="sex" label="性别" width="250" >
      <template #default="scope">
        {{ scope.row.sex === "1" ? '男' : "女"}}
      </template>

    </el-table-column>
    <el-table-column fixed prop="mobile" label="手机号" width="250" />

     <el-table-column fixed prop="active" label="状态" width="250" >
      <template #default="scope">
        <el-tag :type="scope.row.active ? 'success' : 'danger'">{{ scope.row.active === 1 ? '正常' : "失效"}}</el-tag>
      </template>

    </el-table-column>



    <el-table-column fixed="right" label="Operations" min-width="140">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row)"
        >
          编辑（后端api问题）
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-info">
    <el-pagination
      v-model:current-page="missions.pageNum"
      :page-size="missions.pageSize"
      :background="false"
      size="small"
      layout="total, prev, pager, next"
      :total="tableData1.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog
  v-model="dialongformvisible"
  :before-close="beforeClose"
  :title="title"
  width="500"
  >
    <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="form"
    :rules="rules"
    >
      <el-form-item v-show="false"  prop="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-button v-if="!form.avatar" type="primary" @click="dialongformimg=true">上传头像</el-button>
        <el-image v-else style="width: 100px; height: 100px" :src="form.avatar" ></el-image>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age" placeholder="18" :min="18" :max="50" @change="handleChange" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="是否生效" prop="active">
         <el-radio-group v-model="form.active">
        <el-radio :value="0" size="large">失效</el-radio>
        <el-radio :value="1" size="large">生效</el-radio>
    </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm(formRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>


  <el-dialog
  v-model="dialongformimg"
  :before-close="beforeClose"
  title="选择图片"
  width="680"
  >
  <div class="image-list">
    <div v-for="(item,index) in fileList" :key="item.name" class="img-box" @click="selectIndex = index">
      <div v-if="selectIndex === index" class="select">
        <el-icon size="25" style="color:red;"><Check /></el-icon>
      </div>
      <el-image style="width: 148px; height: 148px" :src="item.url"></el-image>
    </div>
  </div>
   <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialongformimg = false">取消</el-button>
        <el-button @click="confirmimg">确认</el-button>
      </div>
    </template>
</el-dialog>

</template>

<style lang="less" scoped>
  .btn{
    display: flex;
    background-color: #fff;
    padding: 20px 0px 15px 10px;
  }
  .image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素之间的间距 */
}

.img-box {
  position: relative;
  cursor: pointer;
}

.select {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
}

</style>
